<template>
  <div class="el_card_main">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-input :placeholder="placeholderInfo" v-model="input" clearable>
        </el-input>
        <el-button style="padding: 3px 0" @click="clearContent">清空</el-button>
        <el-button style="padding: 3px 0" type="primary">搜索</el-button>

        <el-button
          style="float: right; padding: 3px 0"
          icon="el-icon-edit"
          type="success"
          @click="centerDialogVisible = true"
          >{{ successBtn }}</el-button
        >
      </div>
      <!-- 用户列表 -->
      <div class="text item">
        <el-table :data="tableData" style="width: 100%">
          <el-table-column
            prop="id"
            label="序号"
            width="180"
            header-align="center"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="email"
            label="邮箱"
            width="180"
            header-align="center"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="phone"
            label="联系电话"
            header-align="center"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="username"
            label="用户名"
            header-align="center"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="permission_group_title"
            label="权限组名称"
            header-align="center"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="role"
            label="角色"
            header-align="center"
            align="center"
          >
          </el-table-column>
          <el-table-column label="操作" header-align="center" align="center">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="primary"
                icon="el-icon-edit"
                plain
                circle
                style="width: 36px; height: 36px"
                @click="handleEdit(scope.row)"
              ></el-button>
              <el-button
                size="mini"
                type="danger"
                icon="el-icon-delete"
                plain
                circle
                style="width: 36px; height: 36px"
                @click="handleDelete(scope.row)"
              ></el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <PageTool
        :paginationPage="1"
        :paginationPagesize="10"
        :total="5"
        @pageChange="handlePageChange"
        @onPageSizeChange="handleSizeChange"
        style="float: right"
      />
    </el-card>
  </div>
</template>

<script>
import { list, add, remove } from '@/api/base/users.js'
export default {
  name: 'my_el_card',
  props: ['title', 'placeholderInfo', 'successBtn'],
  data () {
    return {
      input: '',
      value: false,
      centerDialogVisible: false,
      dialogFormVisible: false,
      closable: false,
      options: [
        {
          value: 1,
          label: '超级管理员组'
        },
        {
          value: 2,
          label: '编辑组'
        },
        {
          value: 3,
          label: '昆昆'
        }
      ],
      // 新增用户表单
      form: {
        username: '',
        email: '',
        phone: '',
        password: '',
        role: '',
        permission_group_id: '',
        introduction: ''
      },
      // 表单校验规则
      rules: {
        username: [
          { required: true, message: '用户名不能为空', trigger: 'blur' },
          { min: 3, max: 6, message: '长度在 3 到 6 个字符', trigger: 'blur' }
        ],
        email: [{ required: true, message: '邮箱不能为空', trigger: 'blur' }],
        password: [
          { required: true, message: '密码不能为空', trigger: 'blur' },
          { min: 6, max: 11, message: '长度在 6 到 11 个字符', trigger: 'blur' }
        ]
      },
      obj: {
        page: 1,
        pagesize: 10
      },
      tableData: []
    }
  },

  async created () {
    this.renderTable()
  },

  methods: {
    // 清空事件
    clearContent () {
      this.input = ''
    },
    // 渲染表单
    async renderTable () {
      const { data } = await list(this.obj)
      this.tableData = [...data.list]
    },
    // 添加成员
    async submitForm (formName) {
      try {
        const valid = await this.$refs[formName].validate()
        if (!valid) return
        const res = await add(this.form)
        console.log(res)
        this.centerDialogVisible = false
      } catch (error) {
        console.log(error)
      }
    },
    // 编辑成员
    handleEdit () {
      // TODO
      console.log(1)
    },
    // 删除成员
    async handleDelete (row) {
      try {
        const res = await remove(row.id)
        console.log(res)
        this.renderTable()
      } catch (e) {
        console.log(e)
      }
    },
    // 页数变化时触发
    handlePageChange (pageNum) {
      console.log(pageNum)
    },
    // 每页显示信息条数
    handleSizeChange (pageSize) {
      console.log(pageSize)
    }
  },
  computed: {
    // 消息记录
    title () {
      return `共 ${this.tableData.length} 条记录`
    }
  }
}
</script>

<style scoped lang="less">
.box-card {
  width: 1681px;
  margin: 0 auto;
  padding: 20px;
  margin-top: 20px;
  .el-input {
    width: 200px;
    height: 32px;
  }
  .addForm {
    .el-input {
      width: 280px;
      height: 36px;
    }
  }
  .el-button--default {
    width: 56px;
    height: 32px;
    margin: 0 0 0 15px;
  }
  .el-alert--info {
    margin-bottom: 20px;
  }
  .el-button--primary {
    width: 56px;
    height: 32px;
  }
  .el-button--success {
    width: 97px;
    height: 32px;
    font-size: 12px;
  }
  .text {
    font-size: 14px;
  }
  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: '';
  }
  .clearfix:after {
    clear: both;
  }
}
</style>
